<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <el-steps :active="active" finish-status="success">
          <el-step title="申请人身份信息采集"></el-step>
          <el-step title="业务申请信息"></el-step>
          <el-step title="确认提交"></el-step>
        </el-steps>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName"  @tab-click="handleClick">
          <el-tab-pane label="申请人身份信息采集" :disabled="true" name="idCardPhoto">
            <id-card-photo ref="idCardPhoto" :photos="photos" :idCardInfo="idCardInfo" @transIdCardPhotoData="getIdCardPhotos"></id-card-photo>
          </el-tab-pane>
          <el-tab-pane label="业务申请信息" :disabled="true" name="applicationData">
            <el-alert v-if="submitError" title="提交失败,请稍后再试" type="error" show-icon>
            </el-alert>
            <living-allowances v-if="isLivingAllowances(approvalKey)" :approvalKey="approvalKey"
              :living-allowances-temp="applicationData" :photos="photos" :idCardInfo="idCardInfo" ref="livingAllowances"></living-allowances>
            <educational-support v-if="isEducationalSupport(approvalKey)" :approvalKey="approvalKey" :photos="photos"
              :idCardInfo="idCardInfo" ref="educationalSupport" :educational-support-temp="applicationData"></educational-support>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="18">
            <el-button style="margin-top: 12px;" v-if="active>1 && !temp && $route.query.action!=='again'" @click="previous">上一步</el-button>
            <el-button style="margin-top: 12px;" type="primary" v-if="active <2" @click="next">下一步</el-button>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-top: 12px;" v-if="active>1" type="primary" plain @click="submit">提交</el-button>
            <el-button style="margin-top: 12px;" v-if="active>1" type="info" plain @click="tempStorage">暂存</el-button>
            <el-button style="margin-top: 12px;" v-if="active>1" type="danger" plain @click="close">结束</el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
  import IdCardPhoto from "./components/IdCardPhoto";
  import LivingAllowances from "../../components/LivingAllowances";
  import EducationalSupport from "../../components/EducationalSupport";
  import { closeCollectTag } from "@/utils/tools";
  import dict from "@/assets/dict";
  import { queryApprovalMemberInfo } from "@/api/reception";

  export default {
    components: {
      IdCardPhoto,
      LivingAllowances,
      EducationalSupport
    },
    props: [],
    data() {
      return {
        approvalKey: this.$route.query.approvalKey,
        applicationData: null,
        temp: this.$route.query.temp,
        error: false,
        active: 1,
        activeName: "idCardPhoto",
        submitError: false,
        idCardInfo: {
          idCard: null,
          sex: null,
          age: null,
          name: null,
          address: null,
          householdType: null,
          phone: null,
          nationalityDisplay: null,
          birthDay: null,
          distDeprt: null,
          idCardImg: null,
          certStartDate: null,
          certEndDate: null
        },
        photos: {
          applicant: {
            front: {
              fileId: null,
              url: null,
              fileName: null,
              fileDefKey: "applicant",
              fileDefName: "申请人身份证照片"
            },
            back: {
              fileId: null,
              url: null,
              fileName: null,
              fileDefKey: "applicant",
              fileDefName: "申请人身份证照片"
            },
            photosList: []
          },
          agent: {
            front: {
              fileId: null,
              url: null,
              fileName: null,
              fileDefKey: "agent",
              fileDefName: "代办人身份证照片"
            },
            back: {
              fileId: null,
              url: null,
              fileName: null,
              fileDefKey: "agent",
              fileDefName: "代办人身份证照片"
            },
            photosList: []
          },
          scene: {
            photo: {
              fileId: null,
              url: null,
              fileName: null,
              fileDefKey: "scene",
              fileDefName: "办理人照片"
            },
            photosList: []
          }
        }
      };
    },
    created() {
      //判断是否暂存数据
      if (this.temp) {
        this.applicationData = JSON.parse(this.$route.query.content);
        this.applicationData.tempId = this.$route.query.tempId;
        this.active = 2;
        this.activeName = "applicationData";
      }
      //数据回填
      if (this.$route.query.applicationData) {
        this.applicationData = this.$route.query.applicationData;
        this.active = 2;
        this.activeName = "applicationData";
      }
    },
    methods: {
      previous() {
        if (this.active-- < 0) this.active = 0;
        if (this.active === 1) {
          this.activeName = "idCardPhoto";
        } else if (this.active === 2) {
          this.activeName = "applicationData";
        }
      },
      next() {
        this.verifyStepOne();
        if (this.error) {
          return;
        }
        if (this.active++ > 2) this.active = 0;
        let memberTemp = {
          relationName: "本人",
          relation: 1,
          memberName: this.idCardInfo.name,
          sex: this.idCardInfo.sex,
          idCard: this.idCardInfo.idCard,
          nationalityDisplay: this.idCardInfo.nationalityDisplay,
          edit: true
        };
        if (this.active === 2) {
          //提取采集数据-进入下一流程
          this.activeName = "applicationData";
          if (this.isLivingAllowances(this.approvalKey)) {
            if (
              this.$refs.livingAllowances.livingAllowances.members.length === 0
            ) {
              this.$refs.livingAllowances.livingAllowances.members.push(
                memberTemp
              );
            }
          } else if (
            this.approvalKey === "EDUCATIONAL_SUPPORT_FERTILITY" ||
            this.approvalKey === "EDUCATIONAL_SUPPORT_LOTTERY"
          ) {
            if (
              this.$refs.educationalSupport.educationalSupport.members.length ===
              0
            ) {
              this.$refs.educationalSupport.educationalSupport.members.push(
                memberTemp
              );
            }
          } else if (this.approvalKey === "EDUCATIONAL_SUPPORT_RURAL") {
            queryApprovalMemberInfo(this.idCardInfo.idCard).then(res => {
              if(res.data){
                this.$refs.educationalSupport.educationalSupport.householder =
                  res.data.name;
                this.$refs.educationalSupport.educationalSupport.householderIdCard =
                  res.data.idCard;
              }
            });
          }
        }
      },
      submit() {
        if (this.isLivingAllowances(this.approvalKey)) {
          this.$refs.livingAllowances.submit();
        } else if (this.isEducationalSupport(this.approvalKey)) {
          this.$refs.educationalSupport.submit();
        }
      },
      tempStorage() {
        if (this.isLivingAllowances(this.approvalKey)) {
          this.$refs.livingAllowances.toTempStorage();
        } else if (this.isEducationalSupport(this.approvalKey)) {
          this.$refs.educationalSupport.toTempStorage();
        }
      },
      close() {
        this.$confirm("结束后已采集的数据将丢失, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "已取消!"
            });
            closeCollectTag(this);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      getIdCardPhotos(data) {
        if (data) {
          if (this.active++ > 2) this.active = 0;
          if (this.active === 2) {
            //提取采集数据-进入下一流程
            this.activeName = "applicationData";
          }
        }
      },
      handleClick(tab) {
        if (tab.name === "idCardPhoto") {
          this.active = 1;
        } else if (tab.name === "applicationData") {
          this.active = 2;
        }
      },
      verifyStepOne() {
        this.error = false;
        if (!this.idCardInfo.idCard) {
          this.error = true;
          this.$message.error('请采集申办人身份证信息');
        } else {
          if (!this.photos.applicant.front) {
            this.error = true;
            this.$message.error('请采集申办人身份证正面照片');
          }
          if (!this.photos.applicant.back) {
            this.error = true;
            this.$message.error('请采集申办人身份证背面照片');
          }
        }
        if (!this.photos.scene) {
          this.error = true;
          this.errorMsg.push("请采集办理人照片");
        }
      },
      isEducationalSupport(key) {
        if (dict.esApprovalKey[key]) {
          return true;
        } else {
          return false;
        }
      },
      isLivingAllowances(key) {
        if (dict.laApprovalKey[key]) {
          return true;
        } else {
          return false;
        }
      }
    }
  };
</script>
<style>
.el-tabs__item.is-disabled{
  color: #000;
}
</style>
